<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <input type="button" id="btn1" value="隐藏">
    <input type="button" id="btn2" value="显示">
    <div class="box"></div>
</body>
<script src="./jquery.js"></script>
<script>

    $("#btn1").click(function(){
        // $(".box").animate({
        //     width:500
        // },1000,function(){
        //     alert("动画结束了");
        // });

        $(".box").animate({
            width:0,
            height:0,
            marginLeft:50,
            marginTop:50
        });
    })

    $("#btn2").click(function(){
        $(".box").animate({
            width:100,
            height:100,
            marginLeft:0,
            marginTop:0
        });
    })

    

</script>
</html>